<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id ="app">
        <!-- 三元表达式： -->
        <!-- <h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2> -->

        <!-- 计算属性： -->
        <h2>今天天气很{{getHotState}}</h2>
        <button @click="changeWeather">切换天气</button>

        <!-- 
            特殊技巧：
                绑定事件的时候 @xxx="yyy"   yyy可以写一些简单的语句
                前提是语句中的属性/方法必须是vm中包含的
         -->
        <button @click="isHot = !isHot">切换天气</button>
        
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                isHot:true,
            },
            // 自定义计算属性
            computed: {
                getHotState() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            // 自定义方法
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            }
        });
    </script>
</body>
</html>